<template>
  <el-dialog
    title="用户登录"
    :model-value="modelValue"
    width="30%"
    center
    :before-close="onHide"
  >
    <div class="mode-wrapper">
      <el-input 
        clearable 
        maxlength="11" 
        prefix-icon="el-icon-phone" 
        v-model="mobile" 
        placeholder="请输入手机号" 
      />
      <div class="input-box">
        <el-input 
          prefix-icon="el-icon-iphone" 
          maxlength="6" 
          v-model="verifyCode" 
          placeholder="请输入验证码" 
        />
        <el-button 
          @click="onSendVerifyCode" 
          :disabled="disabled" 
          style="margin-left:40px" 
          type="primary"
        >
          {{codeText}}
        </el-button>
      </div>
      <el-button 
        style="width:50%" 
        @click="onHide" 
        class="submit-btn" 
        type="primary" 
        size="large" 
        :loading="loading"
      >
        登录
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'

// eslint-disable-next-line no-undef
const emits = defineEmits(['update:modelValue'])
// eslint-disable-next-line no-undef
defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})

const verifyCodeTime = ref(60)
const disabled = ref(false)
const loading = ref(false)
const codeText = ref('获取验证码')
const mobile = ref('')
const verifyCode = ref('')

// 发送验证码
function onSendVerifyCode() {
  const mobileVal = mobile.value
  if (mobileVal && mobileVal.length === 11) {
    verifyCodeTime.value = 60
    setVerifyCodeStatus()
  } else {
    ElMessage.warning('请填写正确的手机号')
  }
}
// 设置验证码发送状态
function setVerifyCodeStatus() {
  if (verifyCodeTime.value > 0) {
    disabled.value = true
    verifyCodeTime.value--
    codeText.value = `${verifyCodeTime.value}秒后再试`
    setTimeout(setVerifyCodeStatus, 1000)
  } else{
    verifyCodeTime.value = 0
    codeText.value = '发送验证码'
    disabled.value = false
  }
}
function onHide() {
  emits('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.mode-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  .input-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 35px 0;
  }
}
</style>